<template>
  <!-- 查看详情 2018/3/7 11:44 zhangQ -->
  <div>
    <Tabs v-model="subOrderOpera.currentTab">
      <template v-for="(item,index) in fleetTabs">
        <TabPane :label="item.label" :name="item.val"></TabPane>
      </template>
    </Tabs>
    <!-- 已经派发司机 -->
    <div v-show="subOrderOpera.currentTab=='1'">
      <Row style="margin-top: 15px;">
        <i-col :span="24">
          <!--<tablePage ref="subOrderTab" :staticData="subOrderData" :isStartLoad="false" :mode="1">-->
          <!--<template slot-scope="props">-->
          <!--<Table :columns="subOrderColumn" border :data="props.data" @on-sort-change="props.sortChange" @on-select-cancel="checkSubOrderCancel" @on-select="checkSubOrder"-->
          <!--@on-select-all="checkSubOrderAll"></Table>-->
          <!--</template>-->
          <!--</tablePage>-->
          <Table :columns="subOrderColumn" border :data="subOrderOpera.dispatchDriver"></Table>
        </i-col>
      </Row>
    </div>

    <!-- 未派发司机 -->
    <div v-show="subOrderOpera.currentTab=='2'">
      <Row>
        <i-col :span="2">
          <Button type="primary" size="large" @click="sendSingle">
            <Icon type="ios-download-outline"></Icon>
            派单
          </Button>
        </i-col>
        <i-col :span="2">
          <Button type="error" size="large" @click="resSendSingle">
            <Icon type="ios-download-outline"></Icon>
            撤销派单
          </Button>
        </i-col>
      </Row>
      <Row style="margin-top: 15px;">
        <i-col :span="24">
          <Table :columns="subOrderColumn" border :data="subOrderOpera.noDispatchDriver"></Table>
        </i-col>
      </Row>
    </div>

    <!-- 未选订单 -->
    <div v-show="subOrderOpera.currentTab=='3'">
      <Row style="margin-top: 15px;">
        <i-col :span="24">
          <Table :columns="subOrderColumn" border :data="subOrderOpera.unDispatchDriver"></Table>
        </i-col>
      </Row>
    </div>

    <xlinkModal v-model="ImgModel" title="图片" className="vertical-center-modal" width="700px;">
      <viewMedia :lookImtList="lookImtList" v-if="ImgModel"></viewMedia>
    </xlinkModal>
  </div>
</template>

<script>
  import { getOrderDetail, assignmentForDriver, assignmentForDriverRemove } from '@api/backEnd/mainOrder'
  import { getAddressList } from '@api/backEnd/station'
  import { getdriverlist } from '@api/backEnd/fleetControl'
  import { mapGetters } from 'vuex'
  import tablePage from '@components/table/tablePage.vue'
  import xlinkModal from '@components/modal/xlinkModal'
  import viewMedia from './viewMedia'
  import _ from 'lodash'

  export default {
    name: 'fleet-send-single',
    data () {
      let fleetTabs = [
        { label: '已派单', val: '1' },
        { label: '未派单', val: '2' },
        { label: '未选择', val: '3' }
      ]
      let subOrderOpera = {
        currentTab: '1',
        dispatchDriver: [],
        noDispatchDriver: [],
        unDispatchDriver: []
      }
      let dispathDriveList = []
      let subOrderColumn = [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '箱号',
          ellipsis: 'false',
          width: 150,
          key: 'containerNoBody',
          render: (h, params) => {
            let containerNo = params.row.containerNoHead + params.row.containerNoBody
            return (<span>{containerNo}</span>)
          }
        },
        {
          title: '司机',
          ellipsis: 'false',
          key: 'driverId',
          width: 200,
          render: (h, params) => {
            let driverName = params.row.driverName
            let shippingAddress = params.row.shippingAddress
            if (!driverName && !shippingAddress) {
              let driverList = this.driverList
              let options = []
              driverList.forEach((item) => {
                options.push(<i-option value={item.id}>{item.login_name}</i-option>)
              })
              return (<i-select on-on-change={(val) => this.selectDriverChange(val, params.row)}>{options}</i-select>)
            } else {
              return (<span>{driverName}</span>)
            }
          }
        },
        {
          title: '送货地址',
          ellipsis: 'false',
          width: 200,
          key: 'shippingAddress',
          render: (h, params) => {
            let driverName = params.row.driverName
            let shippingAddress = params.row.shippingAddress
            if (!driverName && !shippingAddress) {
              let address = this.address
              let options = []
              address.forEach((item) => {
                options.push(<i-option value={item}>{item}</i-option>)
              })
              return (<i-select on-on-change={(val) => this.selectAddressChange(val, params.row)}>{options}</i-select>)
            } else {
              return (<span>{shippingAddress}</span>)
            }
          }
        },
        {
          title: '托运人',
          ellipsis: 'false',
          width: 100,
          key: ''
        },
        {
          title: '收货人',
          ellipsis: 'false',
          width: 100,
          key: ' '
        },
        {
          title: '品名',
          ellipsis: 'false',
          width: 100,
          key: ' '
        },
        {
          title: '接取送达费（元）',
          ellipsis: 'false',
          key: ' '
        },
        {
          title: '状态',
          ellipsis: 'false',
          width: 80,
          key: '',
          render: (h, params) => {
            let driverId = params.row.driverId
            if (driverId) {
              return (<span style="color:green">已派单</span>)
            } else {
              return (<span style="color:red">未派单</span>)
            }
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: 250,
          render: (h, params) => {
            let voucherImg = params.row.voucherImg
            let viewImg = (<i-button size="small" style="margin-right: 5px;">图片查看</i-button>)
            if (voucherImg) {
              viewImg = (<i-button type="primary" size="small" style="margin-right: 5px;" onClick={() => this.viewDetailImg(params.row)}>图片查看</i-button>)
            }
            let btnArray = []
            powerUtil.contains('orderListUnfinishedFleet') && btnArray.push(viewImg)
            return (btnArray)
          }
        }
      ]
      let noticeRecordColumn = [
        {
          title: '车队名称',
          ellipsis: 'false',
          key: 'fleetName'
        },
        {
          title: '送货地址',
          ellipsis: 'false',
          key: 'addresses'
        }
      ]
      let subOrderData = []
      let noticeRecordData = []
      let driverList = []
      let address = []
      let sendSingleList = []
      let resSendSingleList = []
      let ImgModel = false
      let datas = { subOrderColumn, subOrderData, noticeRecordColumn, noticeRecordData, driverList, address, dispathDriveList, sendSingleList, resSendSingleList, ImgModel, fleetTabs, subOrderOpera }
      return datas
    },
    props: {
      currentMainOrder: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    computed: {
      ...mapGetters(['currentUser'])
    },
    methods: {
      selectDriverChange (val, row) {
        let dispathDriveObj = _.findIndex(this.dispathDriveList, { 'subOrderNo': row.orderNo })
        // 需要发送列表中是否存在改变的运单
        let sendSingleListObj = _.findIndex(this.sendSingleList, { 'subOrderNo': row.orderNo })
        if (dispathDriveObj >= 0) {
          this.dispathDriveList[dispathDriveObj].driverId = val
        } else {
          this.dispathDriveList.push({ mainOrderNo: row.mainOrderNo, subOrderNo: row.orderNo, driverId: val, address: '' })
        }
        // 已选中则把数据更新到需要发送列表中
        if (sendSingleListObj >= 0) {
          this.sendSingleList[sendSingleListObj].driverId = val
        }
      },
      selectAddressChange (val, row) {
        let dispathAddressObj = _.findIndex(this.dispathDriveList, { 'subOrderNo': row.orderNo })
        // 需要发送列表中是否存在改变的运单
        let sendSingleListObj = _.findIndex(this.sendSingleList, { 'subOrderNo': row.orderNo })
        if (dispathAddressObj >= 0) {
          this.dispathDriveList[dispathAddressObj].address = val
        } else {
          this.dispathDriveList.push({ mainOrderNo: row.mainOrderNo, subOrderNo: row.orderNo, driverId: '', address: val })
        }
        // 已选中则把数据更新到需要发送列表中
        if (sendSingleListObj >= 0) {
          this.sendSingleList[sendSingleListObj].address = val
        }
      },
      driverlist () {
        getdriverlist({
          page: 1,
          pageSize: 500
        }).then(res => {
          if (+res.data.isSuccess === 1) {
            let resData = res.data
            this.driverList = resData.data.list
          } else {
            console.log(res.data.res)
          }
        })
        getAddressList().then(res => {
          if (res.data.isSuccess === 1) {
            this.address = res.data.data
          }
        })
      },
      // 派单
      sendSingle () {
        console.log('sendSingle', this.sendSingleList)
        let param = this.sendSingleList
        if (param && param.length > 0) {
          let result = param.some((item) => {
            if (!item.driverId && !item.address) {
              return true
            }
          })
          if (result) {
            this.$Message.error('司机和地址必选')
            return
          }
          console.log('param', param)
          assignmentForDriver(param).then(res => {
            if (+res.data.isSuccess === 1) {
              this.$Message.success('派单成功')
              this.subOrderData = []
              this.getSubOrderData()
            }
          })
        } else {
          this.$Message.error('请选择一条数据后派单')
        }
      },
      // 撤销派单
      resSendSingle () {
        let param = this.resSendSingleList
        if (param && param.length > 0) {
          let result = param.some((item) => {
            if (item.driverId.length < 0 && !item.address.length < 0) {
              return true
            }
          })
          if (result) {
            this.$Message.error('未派单数据不能撤销派单')
            return
          }
          console.log('param', param)
          assignmentForDriverRemove(param).then(res => {
            if (+res.data.isSuccess === 1) {
              this.$Message.success('撤销成功')
              this.subOrderData = []
              this.getSubOrderData()
            }
          })
        } else {
          this.$Message.error('请选择一条数据后撤销派单')
        }
      },
      checkSubOrder (selection, row) {
        if (row.driverId) {
          this.resSendSingleList.push({ mainOrderNo: row.mainOrderNo, subOrderNo: row.orderNo, driverId: row.driverId, address: row.shippingAddress })
        } else {
          let dispathAddressObj = _.findIndex(this.dispathDriveList, { 'subOrderNo': row.orderNo })
          // 司机列表中存在选择的司机和地址
          if (dispathAddressObj >= 0) {
            this.sendSingleList.push(this.dispathDriveList[dispathAddressObj])
          } else {
            // 不存在则生成一条新纪录
            this.sendSingleList.push({ mainOrderNo: row.mainOrderNo, subOrderNo: row.orderNo, driverId: '', address: '' })
          }
        }
      },
      checkSubOrderAll (selection, row) {
      },
      checkSubOrderCancel (selection, row) {
        console.log('checkSubOrderCancel', selection, row)
        if (row.driverId) {
          let resSendSingleListObj = _.findIndex(this.resSendSingleList, { 'subOrderNo': row.orderNo })
          this.resSendSingleList.splice(resSendSingleListObj, 1)
        } else {
          let sendSingleListObj = _.findIndex(this.sendSingleList, { 'subOrderNo': row.orderNo })
          this.sendSingleList.splice(sendSingleListObj, 1)
        }
      },
      dataRefresh () {
        this.getSubOrderData()
        // this.$refs['subOrderTab'].dataRefresh()
      },
      viewDetailImg (row) {
        this.lookImtList = JSON.parse(row.voucherImg)
        this.ImgModel = true
      }
    },
    watch: {
      'driverVideoObj.show' (val, oldval) {
        if (!val) {
          $('#driverVideo').trigger('pause')
        }
      }
    },
    mounted () {
      this.getSubOrderData()
      this.driverlist()
    },
    components: { tablePage, xlinkModal, viewMedia }
  }
</script>
